<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Rain CSS > Index</title>
<meta content="rain css,rain_css,rain css framework,rain.css,html5前端框架,前端框架,front-end,css" name="description"/>
<meta content="rain css,rain_css,rain css framework,rain.css,html5前端框架,前端框架,front-end,css" name="keywords"/>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
<style type="text/css">
.scrollup{
background: url(images/top.png) no-repeat 0 0;
bottom: 20px;
height: 38px;
right: 20px;
width: 38px;
}
.uploaddd{ border:0 none; width: 200px; height: 200px;
background: url(images/top.png) no-repeat 0 0;}
</style>
</head>
<body class="body">
      <div class="header headerBlue">
        <div class="lsn posr clearfix">
            <a href="http://www.webdevelopmentmachine.com" class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
            <a href="http://www.webdevelopmentmachine.com/blog" class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
            <a href="http://www.webdevelopmentmachine.com/demo/game.html" class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
        </div>
      </div>
      <div class="headerM headerGrey">
          <div class="container posr">
              <div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
          </div>
      </div>

<div class="container mt">
    <div class="content">
    	<div class="sidebar l positionR">
        <div class="sidebox">
          <h2 class="category">Rain CSS是什么</h2>
          <p>Rain css是一个基于单个css对象的前端框架,所有的单个css对象在screen.css和rain.css里面,所以的对象可以直接拿来调用,并且其完全支持css3,
          rain css的reset和基本html元素部分使用 <a href="http://www.blueprintcss.org" title="blueprint framework" target="_blank">blueprint框架</a>.</p>
          <h2 class="category">What is Rain CSS</h2>
          <p>Rain css is a CSS Object oriented implementing,and all object are set in screen.css and rain.css,so you can only invoke it now and it support all css3 properties,
          and the reset css use <a href="http://www.blueprintcss.org" title="blueprint framework" target="_blank">blueprint framework</a>.</p>
        </div>
        <a href="https://github.com/RainZhai/Rain-CSS-Framework" class="block tdn tac heightLL rounds css3_gradient_grey borderGrey_2 button greyButton ">Github</a>
      </div>
      
      <div class="main mainRight posr">
      	<div class="entry">  
          <h1 class="entryTitle pt">例子 Examples</h1>
          <table class="table-2" summary="Blog">
            <caption><h2 class="ms">基本HTML元素 Base HTML elements</h2></caption>
            <tr>
              <td><a class="block lh-2" href="elements.html" title="Elements" target="_blank">页面元素 Elements</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="grid.html" title="Grid" target="_blank">网格 Grid</a></td> 
            </tr>
           <tr>
              <td><a class="block lh-2" href="grids.html" title="Grid" target="_blank">手机端网格 Mobile Grid</a></td> 
            </tr>
          </table>
          
          <table class="table-2" summary="HTML Common Components">     
            <caption><h2 class="marginS">HTML通用组件  HTML Common Components</h2></caption>
            <tr>
                <td><a class="block lh-2" href="table.html" title="Table" target="_blank">表格 Table</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="form.html" title="Form" target="_blank">表单 Form</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="buttons.html" title="Buttons" target="_blank">按钮 Buttons</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="icons.html" title="Icons" target="_blank">图标 Icons</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="dialog.html" title="Dialogs" target="_blank">弹出框 Dialogs</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="mobile.html#Messages" title="Messages" target="_blank">消息框 Messages</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="mobile.html#Labels" title="Labels" target="_blank">标记 Labels</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="select.html" title="selects" target="_blank">选择框 Selects</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="list.html" title="list" target="_blank">列表 List</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="mobile.html#CheckBox" title="checkbox" target="_blank">复选框 checkbox</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="mobile.html#collapsibles" title="collapsibles" target="_blank">可折叠组件 collapsibles</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="mobile.html#swipe" title="swipeEvent" target="_blank">滑动广告 swipe</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="panels.html" title="panels" target="_blank">控制板 panels</a></td>
            </tr>
             <tr>
                <td><a class="block lh-2" href="mobile.html#slide" title="slide" target="_blank">滑动幻灯片 slide</a></td>
             </tr>
             <tr>
                <td><a class="block lh-2" href="mobile.html" title="loader" target="_blank">基本加载弹框 Basic loader</a></td>
             </tr>
             <tr>
                <td><a class="block lh-2" href="mobile.html#slider" title="slider" target="_blank">滑动条 slider</a></td>
             </tr>
             <tr>
                <td><a class="block lh-2" href="banner.html" title="slider" target="_blank">大导航 Big banner</a></td>
             </tr>
          </table>
          
          <table class="table-2" summary="Page Layout > Navigation"> 
          	<caption><h2 class="marginS">页面布局 Page Layout</h2></caption>
            <tr>
                <td><a class="block lh-2" href="layouts.html" title="Layouts" target="_blank">网页布局 Layouts</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="navigation.html" title="Navigation" target="_blank">页面导航 Navigations</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="navVerticalFixed.html" title="Navigation Vertical Fixed" target="_blank">垂直固定导航条 Vertical Fixed Navigation</a></td>
            </tr> 
            <tr>
                <td><a class="block lh-2" href="navTopFixed.html" title="Navigation Vertical Fixed" target="_blank">顶部固定导航条 Top Fixed Navigation</a></td>
            </tr> 
          </table>
          
          <table class="table-2" summary="Mobile UI">
          	<caption><h2 class="marginS">移动端界面 Mobile UI</h2></caption>
            <tr>
                <td><a class="block lh-2" href="marticle.html" title="article" target="_blank">移动端文章 Mobile Article</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="mobile.html" title="mobile" target="_blank">移动端组件 Mobile Components</a></td>
            </tr>
            <tr>
                <td><a class="block lh-2" href="topExpand.html" title="expand" target="_blank">顶部伸展 Top expand</a></td>
            </tr>
          </table> 
					
          <table class="table-2" summary="Blog and Application">
            <caption><h2 class="ms">博客和应用界面 Blog and Application UI</h2></caption>
            <tr>
              <td><a class="block lh-2" href="articlelist.html" title="Article List" target="_blank">文章列表 Article List</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="article.html" title="Article" target="_blank">文章 Article</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="login.html" title="Login" target="_blank">登录 Login</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="ie6Upgrade.html" title="ie6Upgrade" target="_blank"> ie6升级提示导航 ie6 Upgrade navigation</a></td> 
            </tr>
          </table>
					
          <table class="table-2" summary="Common effect">
            <caption><h2 class="ms">常用特效 Common effect</h2></caption>
            <tr>
              <td><a class="block lh-2" href="css3.html" title="css3" target="_blank">CSS3特效 CSS3</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="html5.html" title="html5标签" target="_blank">html5标签 html5 tags</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="lazyloadimg.html" title="lazyload" target="_blank">图片懒加载 lazyload</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="listload.html" title="listload" target="_blank">列表动态加载 listload</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="scrollScreen.html" title="scrollScreen" target="_blank">滚屏动画效果 scrollScreen</a></td> 
            </tr>
          </table>
					
          <table class="table-2" summary="Common effect">
            <caption><h2 class="ms">D3数据可视化示例  D3.js demo</h2></caption>
            <tr>
              <td><a class="block lh-2" href="d3/d3.html" title="柱状图" target="_blank">柱状图</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="d3/d3.html#demo2" title="热点图" target="_blank">热点图</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="d3/d3.html#demo3" title="动态柱状图" target="_blank">动态柱状图</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="d3/d3.html#demo5" title="分子图" target="_blank">分子图</a></td> 
            </tr>
            <tr>
              <td><a class="block lh-2" href="d3/d3.html#demo4_run1" title="环图" target="_blank">环图</a></td> 
            </tr>
          </table>
        </div> 
      </div>
      

    <footer class="footer socialFooter c borderTop">
      <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
      <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
    </footer>  
    </div>
  </div>
 <a id="scrollUp" href="#top" class='scrollup posf block'></a> 
<script type="text/javascript">
function loadJS( src, cb ){
  "use strict";
  var ref = window.document.getElementsByTagName( "script" )[ 0 ];
  var script = window.document.createElement( "script" );
  script.src = src;
  script.async = true;
  ref.parentNode.insertBefore( script, ref );
  if (cb && typeof(cb) === "function") {
    script.onload = cb;
  }
  return script;
}
window.onload=function(){
loadJS("http://cdn.staticfile.org/jquery/1.7.2/jquery.min.js",function(){
	loadJS("js/jquery.scrollUp.min.js",function(){
		$.scrollUp({
			scrollName: 'scrollUp', // Element ID
			topDistance: '300', // Distance from top before showing element (px)
			topSpeed: 300, // Speed back to top (ms)
			animation: 'fade', // Fade, slide, none
			animationInSpeed: 200, // Animation in speed (ms)
			animationOutSpeed: 200, // Animation out speed (ms)
			scrollText: '', // Text for element
			activeOverlay: false // Set CSS color to display scrollUp active point, e.g '#00FFFF'
		}); 
	});
});
}
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F645f788e2c22c6df311adee9e3c514a0' type='text/javascript'%3E%3C/script%3E"));
</script> 
</body>
</html>